<script setup>
    import {
        Management,
        Promotion,
        UserFilled,
        User,
        Crop,
        EditPen,
        SwitchButton,
        CaretBottom
    } from '@element-plus/icons-vue'
    import avatar from '@/assets/default.png'
    import {useTokenStore} from '@/store/token.js'
    const tokenStore = useTokenStore();

    //条目被点击后,调用的函数
    import {useRouter} from 'vue-router'

    const router = useRouter();
    import {ElMessage, ElMessageBox} from 'element-plus'

    const handleCommand = (command) => {
        //判断指令
        if (command === 'logout') {
            //退出登录
          tokenStore.removeToken()
          //跳转到登录界面
          router.push('/login')
        } else {
            //路由
            router.push('/admin/' + command)
        }
    }
</script>

<template>
	<!-- element-plus中的容器 -->
	<el-container class="layout-container">
		<!-- 左侧菜单 -->
		<el-aside width="200px">
			<div class="el-aside__logo"></div>
			<!-- element-plus的菜单标签 -->
			<el-menu active-text-color="#ffd04b" background-color="#232323" text-color="#fff"
					 router>
				<el-menu-item index="/admin">
					<el-icon>
						<Management/>
					</el-icon>
					<span>管理员管理</span>
				</el-menu-item>
				<el-menu-item index="/course">
					<el-icon>
						<Promotion/>
					</el-icon>
					<span>课程管理</span>
				</el-menu-item>
        <el-menu-item index="/coach">
          <el-icon>
            <Promotion/>
          </el-icon>
          <span>教练管理</span>
        </el-menu-item>
        <el-menu-item index="/chart">
          <el-icon>
            <Promotion/>
          </el-icon>
          <span>统计图表</span>
        </el-menu-item>
				<el-sub-menu>
					<template #title>
						<el-icon>
							<UserFilled/>
						</el-icon>
						<span>个人中心</span>
					</template>
					<el-menu-item index="/admin/info">
						<el-icon>
							<User/>
						</el-icon>
						<span>基本资料</span>
					</el-menu-item>
					<el-menu-item index="/admin/avatar">
						<el-icon>
							<Crop/>
						</el-icon>
						<span>更换头像</span>
					</el-menu-item>
					<el-menu-item index="/admin/resetPassword">
						<el-icon>
							<EditPen/>
						</el-icon>
						<span>重置密码</span>
					</el-menu-item>
				</el-sub-menu>
			</el-menu>
		</el-aside>
		<!-- 右侧主区域 -->
		<el-container>
			<!-- 头部区域 -->
			<el-header>
				<div><strong>思途后台管理系统{{ zhansgan }}</strong></div>
				<!-- 下拉菜单 -->
				<!-- command: 条目被点击后会触发,在事件函数上可以声明一个参数,接收条目对应的指令 -->
				<el-dropdown placement="bottom-end" @command="handleCommand">
                    <span class="el-dropdown__box">
                        <el-avatar :src="avatar"/>
                        <el-icon>
                            <CaretBottom/>
                        </el-icon>
                    </span>
					<template #dropdown>
						<el-dropdown-menu>
							<el-dropdown-item command="info" :icon="User">基本资料</el-dropdown-item>
							<el-dropdown-item command="avatar" :icon="Crop">更换头像</el-dropdown-item>
							<el-dropdown-item command="resetPassword" :icon="EditPen">重置密码</el-dropdown-item>
							<el-dropdown-item command="logout" :icon="SwitchButton">退出登录</el-dropdown-item>
						</el-dropdown-menu>
					</template>
				</el-dropdown>
			</el-header>
			<!-- 中间区域 -->
			<el-main>
				<!-- <div style="width: 1290px; height: 570px;border: 1px solid red;">
                    内容展示区
                </div> -->
				<router-view></router-view>
			</el-main>
			<!-- 底部区域 -->
			<el-footer>后台管理 ©2024 Created by Gao</el-footer>
		</el-container>
	</el-container>
</template>

<style lang="scss" scoped>
    .layout-container {
        height: 100vh;

        .el-aside {
            background-color: #232323;

            &__logo {
                height: 120px;
                background: url('@/assets/logo.png') no-repeat center / 120px auto;
            }

            .el-menu {
                border-right: none;
            }
        }

        .el-header {
            background-color: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .el-dropdown__box {
                display: flex;
                align-items: center;

                .el-icon {
                    color: #999;
                    margin-left: 10px;
                }

                &:active,
                &:focus {
                    outline: none;
                }
            }
        }

        .el-footer {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            color: #666;
        }
    }
</style>